<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
      </view>
    </view>

    <!-- 资源展示区域 -->
    <Resource :resource="resource" />

    <!-- 横向滚动公告条 -->
    <Announcement :tip="tip" />

    <!-- 个人中心菜单列表 -->
    <view class="menu">
      <view class="menu-container">
        <view
          class="menu-item"
          v-for="(item, index) in menuItems"
          :key="item.id"
          @click="handleMenuItemClick(item.type)"
        >
          <image class="menu-icon" :src="getSrc(index)" />
          <view class="menu-text">{{ item.name }}</view>
          <view class="menu-arrow">
            <view class="triangle"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <Tabbar ref="Tabbar" pagePath="/pages/my/index" />
  </view>
</template>

<script setup lang="ts">
import Tabbar from '@/components/tabbar/tabbar.vue'
import HeaderTip from '@/components/Header/index.vue'
import Resource from '@/components/resource/index.vue'
import Announcement from '@/components/announcement/index.vue'
const resource = ref({
  blue: 200000,
  blue1: 10000,
  red: 200000,
  red1: 10000,
  gold: 200000,
  gold1: 10000,
})
const tip = ref('参与探险大赛赢丰厚奖励！每日登录领取免费礼包')

// 个人中心菜单项数据
const menuItems = ref([
  { id: 1, name: 'VIP等级', icon: 'vip-level', type: 'vip' },
  { id: 2, name: '实名认证', icon: 'real-name-auth', type: 'checkName' },
  { id: 3, name: '能量记录', icon: 'energy-record', type: 'energyRecord' },
  { id: 4, name: '能量交易', icon: 'energy-trade', type: 'energyTrade' },
  { id: 5, name: '能量兑换', icon: 'energy-exchange', type: 'energyExchange' },
  { id: 6, name: '兑换码', icon: 'code-exchange', type: 'codeExchange' },
  { id: 7, name: '礼物交易', icon: 'gift-trade', type: 'giftTrade' },
  { id: 8, name: '在线客服', icon: 'customer-service', type: 'customerService' },
  { id: 9, name: '设置', icon: 'settings', type: 'setting' },
])
const getSrc = (index: number) => {
  return `/static/images/my/${menuItems.value[index].icon}.png`
}
// 处理菜单项点击
const handleMenuItemClick = (menuType: string) => {
  console.log(`点击菜单项: ${menuType}`)
  // 这里可以添加菜单项点击后的逻辑，比如跳转到对应的页面
  // router.push(`/pages/my/${menuType}`)
  if (menuType === 'customerService') {
    uni.navigateTo({
      url: '/pages/home/page/service',
    })
    return
  }
  uni.navigateTo({
    url: `/pages/my/page/${menuType}`,
  })
}
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .top-buttons {
      display: flex;
      gap: 30rpx;

      .top-btn {
        font-size: 44rpx;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

/* 个人中心菜单样式 */
.menu {
  padding: 20rpx;
  border-radius: 30rpx;
  border: 2rpx solid #00ffff;
  margin: 30rpx 0 100rpx 0;
  .menu-container {
    position: relative;
    z-index: 10;
    padding: 20rpx 40rpx;
    background: rgba(10, 26, 51, 0.5);
    box-shadow: 0 0 30rpx rgba(46, 131, 255, 0.3);
    animation: glow 2s infinite alternate;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx;
    border-bottom: 3rpx solid #00ffff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;

    .menu-icon {
      margin-right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      text-align: center;
    }

    .menu-text {
      flex: 1;
      font-size: 36rpx;
      color: #fff;
      text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
    }

    .menu-arrow {
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .triangle {
      width: 0;
      height: 0;
      border-top: 12rpx solid transparent;
      border-bottom: 12rpx solid transparent;
      border-left: 20rpx solid #00ffff;
      border-right: none;
    }

    &:hover .menu-arrow {
      transform: translateX(5rpx);
    }

    &:hover .triangle {
      border-left-color: #00ffff;
    }
  }
}
</style>
